<template>
  <div class="register-box" v-show="registerHide">
      <div class="y-register">
        <div class="cancel">x</div>
          <form action="">
          <ul>
            <li class="bgColor"><a>登录账号</a></li>
            <li><a>注册账号</a></li>
          </ul>
          <div class="user-register">
            <div class="register-input">
              <p>邮箱地址</p>
              <input v-model="email" type="email" placeholder="填写你常用的邮箱作为登录帐号">
            </div>
            <div class="register-input">
              <p>用户名</p>
              <input v-model="newUsername" type="text" placeholder="中、英文均可，最长18个英文或9个汉字">
            </div>
            <div class="register-input">
              <p>密码</p>
              <input v-model="newPassword" type="password" placeholder="5-20位英文、数字、符号，区分大小写">
            </div>
            <div class="register-input">
              <p>重复密码</p>
              <input type="password" v-model="newPassword2" placeholder="重复密码">
            </div>
              <el-button :plain="true" class="button" @click="register()">注册</el-button>
            </div>
          </form>
      </div>
  </div>
</template>
<script>
import { setCookie, getCookie } from "../assets/js/cookie.js";
export default {
  data() {
    return {
      email: "",
      newUsername: "",
      newPassword: "",
      newPassword2: "",
      registerHide:true
    };
  },
  methods: {
    register() {
      let email = this.email;
      let newUsername = this.newUsername;
      let newPassword = this.newPassword;
      let newPassword2 = this.newPassword2;
      if (!email || !newUsername || !newPassword || !newPassword2) {
        this.$message({message:'用户名或密码不能为空',type:'warning'})
        return false;
      }
      if (newPassword !== newPassword2) {
        this.$message.error('两次输入的密码不相同')
      } else {
        let data = {email:this.email, username: this.newUsername, password: this.newPassword };
        setCookie(this.email,this.newUsername, this.newPassword, 1000 * 60);
        if (true) {
          this.$message({message:'注册成功',type:'success'})
          
          /*注册成功之后再跳回登录页*/
        }
      }
    }
  }
};
</script>
<style scoped>
p {
  margin: 0;
  padding: 0;
  margin-bottom: 5px;
}
ul {
  margin: 0;
  padding: 0;
}
.cancel {
  width: 20px;
  height: 20px;
  font-size: 13px;
  background: #21cd30;
  color: white;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  right: 10px;
  top: 7px;
  cursor: pointer;
}
.register-box {
  width: 100%;
  position: fixed;
  display: none;
  top: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.5);
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
.y-register {
  margin: 225px 36%;
  width: 450px;
  height: 540px;
  background: #ffffff;
  position: fixed;
}

.y-register form ul {
  display: flex;
  justify-content: space-around;
}
.y-register form ul li {
  padding: 22px 79.8px;
  cursor: pointer;
}
.y-register form ul li a {
  font-size: 14px;
  color: #616161;
}
.user-register {
  width: 350px;
  margin: 40px auto;
  font-size: 14px;
}
.user-register div {
  margin-bottom: 20px;
}
.user-register .register-input input {
  width: 349px;
  height: 38px;
  padding: 5px 0 5px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.user-register input:focus {
  border-color: #21cd30;
}

.user-register .button {
  text-align: center;
  background: #21cd30;
  color: white;
  padding: 12px 160px;
  border: 1px solid white;
  border-radius: 4px;
  transition: all 0.5s;
}
.user-register .button:hover {
  background: #262626;
}
.bgColor {
  background: #f5f5f5;
}
</style>
